<template>
	<view class="page-box min-full-height">
		<image class="header-bg" src="/static/head-bg.png" mode="widthFix"></image>
		<view class="content-box">
			<view class="wheel-box">
				<view class="turntable-box">
					<image class="turntable-bg" src="/static/turntable-bg.png" mode="aspectFill"></image>
				</view>
				<image class="control-icon" @click="onLotteryDraw" src="/static/control.png" mode="aspectFill"></image>
				<view class="canvas-box">
					<canvas ref="turntable" class="canvas-item" canvas-id="myCanvas" :style="{width: canvasWidth + 'px', height: canvasHeight + 'px'}"></canvas>	
				</view>
			</view>
			<view class="lucky-box">
				<view class="lucky-btn" @click="onLotteryDraw">立即抽奖</view>
			</view>
			<view class="rule-box">
				<view class="rule-wrap">
					<view class="title-box">
						<view class="rhombus-item"></view>
						<view class="title-name">活动规则</view>
						<view class="rhombus-item"></view>
					</view>
					<view class="rule-list">
						<view class="rule-item">
							<view class="serial-box"></view>
							<view class="rule-name">活动时间为2021年11月11日至2021年113日，为期3天。</view>
						</view>
						<view class="rule-item">
							<view class="serial-box"></view>
							<view class="rule-name">活动期间邀请好友参加均可获得相应的活动奖励。</view>
						</view>
						<view class="rule-item">
							<view class="serial-box"></view>
							<view class="rule-name">本活动最终解释权归本平台所有。</view>
						</view>
					</view>					
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const systemInfo = uni.getSystemInfoSync()
	const pxToRpxScale = systemInfo.pixelRatio
	
	export default {
		data() {
			return {
				ctx:null,//canvas上下文
				canvasWidth:450 / pxToRpxScale,//默认canvas宽度
				canvasHeight:450 / pxToRpxScale,//默认canvas高度
				turntableConfig:{//转盘配置
					startAngle: 0,//开始角度
					fontSize:28 / pxToRpxScale,//字体大小
					prizeList:[{//奖品列表
						id:'202111141746',
						src:"",
						name:"三等奖",
						content:"88元",
						backgroundColor:"#fffffd",
						color:'#ff6600'
					},{
						id:'202111141747',
						src:"",
						name:"三等奖",
						content:"88元",
						backgroundColor:"#fdf3ab",
						color:'#ff6600'
					},{
						id:'202111141748',
						src:"",
						name:"谢谢参与",
						backgroundColor:"#fffffd",
						content:"",
						color:'#ff6600'
					},{
						id:'202111141749',
						src:"",
						name:"一等奖",
						content:"888元",
						backgroundColor:"#fdf3ab",
						color:'#ff6600'
					},{
						id:'202111141750',
						src:"",
						name:"谢谢参与",
						backgroundColor:"#fffffd",
						content:"",
						color:'#ff6600'
					},{
						id:'202111141751',
						src:"",
						name:"二等奖",
						content:"188元",
						backgroundColor:"#fdf3ab",
						color:'#ff6600'
					}]
				}
			}
		},
		onReady: async function(e) {
			this.ctx = uni.createCanvasContext('myCanvas', this)
			this.drawTurntable()
		},
		methods: {
			// 绘制转盘
			async drawTurntable(){
				const ctx = this.ctx
				// 画布的高度
				let canvasW = this.canvasWidth
				// 画布的宽度
				let canvasH = this.canvasHeight
				// 计算每个奖项所占基础角度
				let baseAngle = Math.PI * 2 / this.turntableConfig.prizeList.length
				// 清除画布内容：clearRect(原点横坐标，原点纵坐标，画布宽度，画布高度)
				ctx.clearRect(0,0,canvasW,canvasH)
				// 设置字体：字体风格(斜体) 字体粗细(加粗) 字体大小(32像素) 字体类型(草书) 
				ctx.font = `normal normal ${this.turntableConfig.fontSize}px sans-serif`
				// 图片信息，默认空对象
				let imageInfo  = null
				for(let index = 0; index < this.turntableConfig.prizeList.length; index++) {
					// 角度
					let angle = this.turntableConfig.startAngle + index * baseAngle
					// 设置填充的颜色
					ctx.setFillStyle(this.turntableConfig.prizeList[index].backgroundColor)
					// 线的颜色
					ctx.setStrokeStyle(this.turntableConfig.prizeList[index].backgroundColor)
					// 开始路径：stroke()描绘的的路径是从beginPath()开始计算
					ctx.beginPath()
					// 画一条弧线：arc(圆的横坐标，圆的纵坐标，圆的半径，起始弧度，终止弧度，弧度方向(可选：顺/你是在))
					ctx.arc(canvasW * 0.5, canvasH * 0.5, (canvasW - 2 / pxToRpxScale) * 0.5, angle, angle + baseAngle, false)
					ctx.arc(canvasW * 0.5, canvasH * 0.5, 0, angle + baseAngle, angle, true)
					// 关闭路径会连接起点和终点
					ctx.closePath()
					// 描绘当前路径的边框
					ctx.stroke()
					// 对当前路径中的内容进行填充
					ctx.fill()
					// 保存当前的绘图上下文
					ctx.save()
					// 设置填充的颜色
					ctx.setFillStyle(this.turntableConfig.prizeList[index].color)
					// 奖品名称
					let prizeName = this.turntableConfig.prizeList[index].name
					let prizeContent = this.turntableConfig.prizeList[index].content
					// 以原点为中心进行变换：translate(水平坐标平移量，竖直坐标平移量)
					let translateX = canvasW * 0.5 + Math.cos(angle + baseAngle * 0.5) * (canvasW * 0.5)
					let translateY = canvasH * 0.5 + Math.sin(angle + baseAngle * 0.5) * (canvasW * 0.5)
					ctx.translate(translateX, translateY)
					// 以原点为中心进行旋转：rotate(旋转角度)
					ctx.rotate(angle + baseAngle * 0.5 + Math.PI * 0.5)
					// 填充文本：fillText(文本，距离原点横坐标的位置，距离原点纵坐标的位置，可选绘制的最大宽带)
					if(prizeName != ""){
						ctx.fillText(prizeName, -ctx.measureText(prizeName).width * 0.5, canvasH * 0.5 * 0.28)
					}
					if(prizeContent != ""){
						ctx.fillText(prizeContent, -ctx.measureText(prizeContent).width * 0.5, canvasH * 0.5 * 0.43)
					}
					if(this.turntableConfig.prizeList[index].src != ""){
						// 添加对应图标
						imageInfo = await this.getImageInfo(this.turntableConfig.prizeList[index].src)
						// 绘制图像到画布：drawImage(图片路径，距离原点横坐标的位置，距离原点纵坐标的位置，图片宽度，图片高度)
						ctx.drawImage(this.turntableConfig.prizeList[index].src,-imageInfo.width * 0.5,canvasH * 0.5 * 0.35,imageInfo.width,imageInfo.height)						
					}
					// 恢复之前保存的绘图上下文
					ctx.restore()
				}
				// 将之前在绘图上下文中的描述（路径、变形、样式）画到canvas中
				await new Promise((re, rj) => ctx.draw(false, () => setTimeout(() => re(), this)))
			},
			// 旋转转盘prizeIndex：奖品索引，从0开始;count：奖品的总数量
			rotateTurntable(prizeIndex,count){
				// 应该旋转的角度，旋转插件角度参数是角度制
				let baseAngle = 360 / count
				// 旋转角度 = 270°（当前第一个角度和指针位置的偏移量） - 奖品的位置 * 每块所占的角度 - 每块所占的角度的一半(指针指向区域的中间)
				// 第一个奖品是从0°开始的，即水平向右方向
				let angles = (360 * 3 / 4) - ( prizeIndex * baseAngle) - (baseAngle / 2)
				// 获取canvas节点
				let $canvasEl = this.$refs[`turntable`].$el
				// 设置旋转角度，设置10*360指多转动10圈
				$canvasEl.style.transform = `rotate(${angles + 360 * 10}deg)`
				// 设置动画的CSS标签名、时间和过渡效果速度曲线(ease-in-out:以慢速开始和结束的过渡效果)
				$canvasEl.style.transition = 'transform 5s ease-in-out'
				// 延时5秒后打开获奖弹窗
				setTimeout((res) =>{
					uni.showModal({
						title: '获奖提示',
						content: this.turntableConfig.prizeList[prizeIndex].name,
						success(res) {
							$canvasEl.style.transform = `rotate(0deg)`
							$canvasEl.style.transition = 'transform 0s ease-in-out'
						}
					})
				},5*1000)
			},
			// 立即抽奖
			onLotteryDraw(){
				// 奖品编号从后台获取
				let prizeId = "202111141749"
				// 通过奖品编号获取奖品索引
				let prizeIndex = this.turntableConfig.prizeList.findIndex(item=>{
					return item.id ===  prizeId
				})
				this.rotateTurntable(prizeIndex, this.turntableConfig.prizeList.length)
			},
			// 获取图片信息
			getImageInfo(image){
				return new Promise((re,rj)=>{
					uni.getImageInfo({
						src:image,
						success: function(res) {
							re(res)
						}
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.min-full-height{
	position: relative;
	background-color: #2965E8;
	min-height: calc(100vh - var(--window-top) - var(--window-bottom) - var(--status-bar-height))
}
.header-bg{
	width: 100vw;
	display: block;
}
.content-box{
	position: relative;
	margin-top: calc(var(--window-top) + var(--window-bottom) + var(--status-bar-height) - 100vh);
	width: 100vw;
	padding: 530rpx 0 0;
	.wheel-box{
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 530rpx;
		.turntable-box{
			position: absolute;
			z-index: 2;
			width: 530rpx;
			height: 100%;
			.turntable-bg{
				width: 100%;
				height: 100%;
			}
		}
		.control-icon{
			position: absolute;
			z-index: 2;
			width: 153rpx;
			height: 184rpx;
		}
	}
	.lucky-box{
		padding: 98rpx 32rpx 0;
		.lucky-btn{
			display: flex;
			justify-content: center;
			align-items: center;
			height: 106rpx;
			font-size: 32rpx;
			color: #FFFFFF;
			letter-spacing: 2rpx;
			text-indent: 2rpx;
			border-radius: 64rpx;
			box-shadow: 0 8rpx 0 #0013be;
			background: #ffc924;
		}
	}
	.rule-box{
		width: 100vw;
		display: flex;
		justify-content: center;
		padding: 80rpx 32rpx 60rpx;
		.rule-wrap{
			width: 100vw;
			min-height: 200rpx;
			border-radius: 20rpx;
			background-color: #FFFFFF;
			padding: 0 32rpx;
			.title-box{
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 32rpx 0;
				border-bottom: 2rpx solid #F2F2F2;
				.rhombus-item{
					width: 30rpx;
					height: 30rpx;
					background-color: #FFC924;
					transform: rotate(45deg);
				}
				.title-name{
					color: #AC6003;
					padding: 0 40rpx;
					font-size: 32rpx;
					font-weight: bold;
					letter-spacing: 2rpx;
					text-indent: 2rpx;
				}
			}		
			.rule-list{
				padding: 30rpx 0 20rpx;
				.rule-item{
					display: flex;
					align-items: center;
					margin-bottom: 20rpx;
					.serial-box{
						flex-shrink: 0;
						width: 20rpx;
						height: 20rpx;
						background: #cc901a;
						border-radius: 50%;
					}
					.rule-name{
						flex-grow: 1;
						font-size: 28rpx;
						color: #AC6003;
						padding-left: 20rpx;
					}
				}
			}			
		}
	}
}
</style>
